<template>
	<view class="content-box">
		<view class="search-box">
			<uni-search-bar v-model="queryInfo.searchValue" focus placeholder="请输入要搜索的音乐" @confirm="searchMusic"></uni-search-bar>
		</view>
		
		<view class="song-list">
			<!-- 歌曲列表 -->
			<songList :songItems="songList"></songList>
		</view>
		
		<!-- 播放歌曲底部条 -->
		<view class="player">
			<playBar :musicItems='playSongList'></playBar>
		</view>

	</view>
	</view>
</template>

<script>
	import songList from '../../components/songList/songList.vue'
	const backgroundAudio = uni.getBackgroundAudioManager();
	
	export default {
		components:{
			songList
		},
		data() {
			return {
				// 搜索条件
				queryInfo:{
					searchValue: '',
					pageNo:1,
					pageSize:20
				},
				// 歌曲列表
				songList: [],
				// 播放的歌曲信息
				playSongList: {
					name: '',
					artist: '',
					src: '',
					pic: '',
					isplay: false,
					playTime: 0
				},
				// 计时器
				countInterval: 0,

			};
		},
		onLoad() {
			if (uni.getStorageSync("musicItem") != '')
				this.playSongList = uni.getStorageSync("musicItem")
			
		},
		onShow() {
			if (uni.getStorageSync("musicItem") != '')
				this.playSongList = uni.getStorageSync("musicItem")
			uni.setStorageSync("currentPage","searchSong")
		},
		
		onReachBottom() {
			this.queryInfo.pageSize += 3
			this.searchMusic()
		},
		methods: {
			// 搜索音乐
			searchMusic(e) {

				uni.request({
					url: 'http://music.jsososo.com/apiMix/search',
					data: {
						key: this.queryInfo.searchValue,
						pageNo: this.queryInfo.pageNo,
						pageSize: this.queryInfo.pageSize,
						type:0,
						_p:163,
						_t:1622969051710
					},

					withCredentials: true,
					success: res => {
						
						// res.data.data.list.map((index)=>{
						// 	this.songList[index].isplay = 1 
						// })
						this.songList = res.data.data.list
						
					},
					fail() {
						console.log('搜索歌曲失败')
					}
				})
			},
			// 播放音乐
			playMusic(songItem) {
				
				uni.request({
					url: 'http://music.jsososo.com/api/song/url',
					data: {
						id:songItem.id,
				
					},
					success: res => {
				
						backgroundAudio.title =songItem.name
						backgroundAudio.singer =songItem.ar[0].name
						backgroundAudio.coverImgUrl =songItem.al.picUrl
						backgroundAudio.src = res.data.data[0].url
						this.playSongList.src = res.data.data[0].url
				// 		if (innerAudioContext.paused) {
				// 			innerAudioContext.play()
				// 			innerAudioContext.onPlay(() => {
				// 				console.log('开始播放');
				// 			});
				// 			innerAudioContext.onError((res) => {
				// 				console.log(res.errMsg);
				// 				console.log(res.errCode);
				// 			});
				
				// 		} else {
				// 			innerAudioContext.stop()
				// 			innerAudioContext.play()
				// 			innerAudioContext.onPlay(() => {
				// 				console.log('开始播放');
				// 			});
				// 			innerAudioContext.onError((res) => {
				// 				console.log(res.errMsg);
				// 				console.log(res.errCode);
				// 			});
				
				// 		}
				
					}
				})
				this.playSongList.id = songItem.id
				this.playSongList.pic = songItem.al.picUrl
				this.playSongList.artist = songItem.ar[0].name
				this.playSongList.name = songItem.name
				this.playSongList.isplay = true
				this.playSongList.playTime = songItem.duration
				
				this.songList.map((item, index) => {
					if (item.id == songItem.id) this.songList[index].isplay = true
					else{
						this.songList[index].isplay = false
					}
				})
				
				uni.setStorageSync('musicOnPlay','1')
				uni.setStorageSync('musicItem', this.playSongList)
				
			},
			// 音乐计时器
			musicInterVal(){
				this.countInterval = setInterval(() => {
					
					if((uni.getStorageSync("currentPage") == "searchSong") && (uni.getStorageSync("currentPlaySongPage") == "recommendSong" ||uni.getStorageSync("currentPlaySongPage") == "indexSong")){
						if(uni.getStorageSync("musicOnPlay") == '1')
						{
							this.playSongList.isplay = true
							this.songList.map((item, index) => {
								if (item.id == this.playSongList.id) this.songList[index].isplay =
									true
							})
						}
							
						else if(uni.getStorageSync("musicOnPlay") == '0')
						{
							this.playSongList.isplay = false
							this.songList.map((item, index) => {
								if (item.id == this.playSongList.id) this.songList[index].isplay =
									false
							})
						}
							
					}
					else if(backgroundAudio.duration != false && backgroundAudio.currentTime != false) {
						
						if((backgroundAudio.duration - backgroundAudio.currentTime) <= 0.5  && uni.getStorageSync("currentPlaySongPage") == "searchSong" ){
							backgroundAudio.stop()
							this.playSongList.isplay = false
							this.songList.map((item, index) => {
								if (item.id == this.playSongList.id) this.songList[index].isplay =
									false
							})
							uni.setStorageSync('musicOnPlay','0')
							uni.setStorageSync('musicItem', this.playSongList)
						}
					}
					
				}, 1000)
			}

		},
		onReady() {
			// 监听音乐是否结束
			this.musicInterVal()
			// 被其他页面调用
			uni.$on("controlSearchMusic", (msg,data) => {
				if (msg == "playMusic") {
					this.playMusic(data)
					backgroundAudio.pause()
					backgroundAudio.pause()
					backgroundAudio.play()
					this.playSongList.isplay = true
					this.songList.map((item, index) => {
						if (item.id == this.playSongList.id) this.songList[index].isplay =
							true
					})
					uni.setStorageSync('musicOnPlay','1')
					uni.setStorageSync('musicItem', this.playSongList)
				} else if (msg == "pauseMusic") {
					backgroundAudio.pause()
					this.playSongList.isplay = false
					this.songList.map((item, index) => {
						if (item.id == this.playSongList.id) this.songList[index].isplay =
							false
					})
					uni.setStorageSync('musicOnPlay','0')
					uni.setStorageSync('musicItem', this.playSongList)
				}
				else if(msg == "stopMusic"){
					backgroundAudio.stop()
				}
				else if(msg == "refreshMusicStatus"){
					this.playSongList = uni.getStorageSync("musicItem")
				}
				else if(msg == "refreshCurrentTime"){
					
					uni.setStorageSync('duration',backgroundAudio.duration)
					uni.setStorageSync("currentTime",backgroundAudio.currentTime)
				}
			})
		}

	}
</script>

<style lang="scss">
	.content-box { 
		.search-box {
			position: fixed;
			top: 0;
			width: 100%;
			height: 120rpx;
			background-color: white;
			z-index: 1000;
		}
		.song-list{
			margin-top: 120rpx;
		}
		.player {
			width: 750rpx;
			position: fixed;
			bottom: 60rpx;
			text-align: center;

		}
	}
</style>
